<template>
  <van-form @failed="onFailed">
    <van-cell-group inset>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
          v-model="userInfo.username"
          name="pattern"
          :required=true
          placeholder="请输入名称"
      />
      <van-field
          v-model="userInfo.gender"
          name="pattern"
          placeholder="请输入性别"
          :rules="[{pattern: genderPattern, message: '请输入正确内容' }]"

      />
      <van-field
          v-model="userInfo.email"
          name="pattern"
          placeholder="请输入邮箱"
          :rules="[{ pattern:emailPattern, message: '请输入正确内容' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>
<script setup lang="ts">
import {onMounted,ref} from 'vue';
import {useRoute} from "vue-router";
import {Toast} from "vant";
import myAxios from "../plugins/myAxios.ts";

const router = useRoute()


const userInfo = ref({
  id: router.query.id as string,
  username: router.query.username as string ,
  userAccount: router.query.userAccount as string,
  avatarUrl: router.query.avatarUrl as string,
  gender: router.query.gender as string,
  phone: router.query.phone as string,
  email: router.query.email as string,
  userStatus: router.query.userStatus as string,
  userRole: router.query.userRole as string,
  planetCode: router.query.planetCode as string,
  tags: router.query.tags as string,
  createTime: router.query.createTimeStr,
})
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const genderPattern = /^(男|女)$/;

onMounted(async () =>{
  const res = await myAxios.get('/user/current');
  let data = res.data;
  if (data.code === 0){
    userInfo.value = data.data;
    Toast.success('获取用户信息成功');
  } else {
    Toast.fail('获取用户信息失败')
  }
})

const onFailed = (errorInfo: any) => {
  if (errorInfo.errors.length != 0) {
    Toast.success('皇上三思啊~！');
  }
  console.log('提交内容', errorInfo);
  console.log('提交内容', router.query);
};

</script>
<style scoped>

</style>